<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航栏加下拉菜单</title>
    <style>
       body{position:relative;display:block;}
       #input-pic{ width:30px; height:30px;  position:absolute; right:10px; top:5px;}
       #left {height:750px;border:1px solid #CCC;width:230px;overflow:auto;overflow-x:hidden;background:#F5F5F5;position:absolute;top:0px;left:-1px;text-overflow:ellipsis;position:fixed}
       .content .title{margin-top:50px}
       #left ul{list-style:none;width:230px;padding:0;padding-bottom:5px;margin:0}
       #left li{padding:0;margin:0;padding-left:25px;font-size:12px;height:35px}
       #left li a{display:block;padding-left:40px;padding-top:8px;text-decoration:none;color:black}
       .h3,.h4,.h5{position:relative;padding-left:20px;font-size:13px}
       .h3{color:black;height:35px; }
       .h4{color:black;height:25px;margin-left:20px;}
       .h5{color:black;height:25px;margin-left:30px;margin-top:10px;}
        #left .h3 span,#left .h4 span,#left .h5 span{width:20px;height:20px;position:absolute;left:-1px;top:-1px; background-image:url(right.png);background-repeat: no-repeat;background-size:20px 20px;
       }
       #left .h3.open span,#left .h4.open span,#left .h5.open span{
       background-image:url(down.png);background-repeat: no-repeat;background-size:20px 20px;
       }
        #left ul {display:none}
       .title{font-size:20px;height:20px;padding:20px 15px; }
       #left a:hover{color:blue}
</style>
</head>
<body>

<div id="left">
    <div class="title">
        开发指南
    </div >
    <div class="content">
        <div class="h3"><span></span>平台概览</div>
        <ul><li><a href="intro-platform.html" target="view_frame">平台简介</a></li>
            <li><a href="noun-explanation.html" target="view_frame">名词解释</a></li>
        </ul>
        <div class="h3"><span></span>常见问题</div>
        <ul>
            <li><a href="equipment-pro.html" target="view_frame">配网常见问题排查-设备端</a></li>
            <li><a href="client-pro.html" target="view_frame">配网常见问题排查-客户端</a></li>
            <!--<li><a href="">公版App的常见问题</a></li>-->
        </ul>
        <div class="h3"><span></span>开发指南</div>
        <ul>
            <div class="h4"><span></span>通用参考</div>
            <ul>
                <li><a href="wrong-diction.html" target="view_frame">错误码字典</a></li>
                <li><a href="add-algor.html" target="view_frame">加签算法</a></li>
            </ul>
            <div class="h4"><span></span>设备端开发指南</div>
            <ul>
                <div class="h5"> <span></span>WIFI模组开发</div>
                <ul>
                    <li><a href="WIFI-Alios,html" target="view_frame">AliOS Things WiFi模组移植指南</a></li>
                    <li><a href="WIFI-other.html" target="view_frame">其他 WiFi模组移植指南</a></li>
                </ul>
                <div class="h5"><span></span>单品设备开发</div>
                <ul>
                    <li><a href="WIFi-signal-equip.html" target="view_frame">WiFi单品设备开发-基于认证模组</a></li>
                    <li><a href="WIFI-signal-equip2.html" target="view_frame">WiFi单品设备开发-基于其他模组</a></li>
                    <li><a href="signal-equip.html" target="view_frame">蜂窝网单品设备开发</a></li>
                    <li><a href="signal-equip2.html" target="view_frame">以太网单品设备开发</a></li>
                    <!--<li><a href="">网关及子设备开发指南</a></li>-->
                </ul>
            </ul>
            <div class="h4"><span></span>云端开发指南</div>
            <ul>
                <li><a href="equip-http.html" target="view_frame">设备数据HTTP方式推送</a></li>
                <li><a href="equip-http-2.html" target="view_frame">设备数据HTTP/2方式推送</a></li>
                <li><a href="API-work.html" target="view_frame">云端调用API 准备工作</a></li>
                <li><a href="API-service.html" target="view_frame">云端调用API 云端资源服务</a></li>
            </ul>
        </ul>
    </div>

<script src="jquery-3.3.1.min.js"></script>
<script >
   $(document).ready(function(){
       $("#left .h3,#left .h4,#left .h5").click(function(){
            <!--$(this).toggleClass("open").next("ul").toggle();-->
            $(this).toggleClass("open").siblings(".h3,.h4,.h5").removeClass("open").end().next("ul").toggle().siblings("ul").hide()
;       })
   })

</script>
</body>